<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-06-16 10:48:05
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:23:31
-->
<template>
  <div class="main">
    <div class="btn">
      <el-button
        type="primary"
        size="default"
        @click="newStaff"
        v-hasPermi="['system:role:userAdd']"
      >
        新增员工
      </el-button>
    </div>
    <el-table :data="roleData" :height="tableHight">
      <template slot="empty" class="emptyBg">
        <img src="@/assets/images/empty.jpg" alt="" />
      </template>
      <el-table-column type="selection"> </el-table-column>
      <el-table-column label="姓名" prop="nickName" fixed> </el-table-column>
      <el-table-column label="账号" prop="phonenumber"> </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">
          {{ scope.row.sex == 1 ? "女" : "男" }}
        </template>
      </el-table-column>
      <el-table-column label="部门" prop="dept.deptName"> </el-table-column>
      <el-table-column label="数据权限">
        <template slot-scope="scope">
          {{ scope.row.isAdmin == 1 ? "全部数据权限" : scope.row.dataScope }}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{ scope.row.status == 1 ? "禁用" : "启用" }}
        </template>
      </el-table-column>
      <el-table-column label="是否激活">
        <template slot-scope="scope">
          {{ scope.row.active == 1 ? "未激活" : "激活" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" v-hasPermi="['system:role:editRole']">
        <template slot-scope="scope">
          <span @click="change(scope.row)" style="color: #1267fa">
            {{ scope.row.isAdmin == 1 ? "" : "更换角色" }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        background
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        layout=" ->,total, sizes, prev, pager, next, jumper "
        :total="total"
      >
      </el-pagination>
      <new-role
        :dialog="dialog"
        :staffFrom="staffFrom"
        v-if="dialog.dialogStaffShowEject"
      ></new-role>
      <el-dialog
        title="更换角色"
        :visible.sync="changeRoles"
        width="30%"
        @close="changeClose"
        custom-class="dialogClass"
        :close-on-click-modal="false"
      >
        <el-select v-model="roIds" style="width: 330px" multiple>
          <el-option
            v-for="item in personnelList"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
          >
          </el-option>
        </el-select>

        <span slot="footer">
          <el-button @click="changeRoles = false">取消</el-button>
          <el-button type="primary" @click="editRole">保存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getRoleUserList, getRoleLists, putRoleUser } from "@/api/sys";
import newRole from "./newRole.vue";
export default {
  components: { newRole },
  props: {
    roleId: {
      required: true,
    },
    isDefault: {
      required: true,
    },
  },
  watch: {
    roleId(newval, oldval) {
      if (newval !== oldval) {
        this.getRoleUserList();
      }
    },
  },
  data() {
    return {
      tableHight: window.innerHeight - 330,
      roIds: [],
      userId: "",
      changeRoles: false,
      total: 0,
      dialog: {
        dialogStaffShow: false,
        dialogStaffShowEject: false,
      },
      staffFrom: {
        isAdmin: "",
        userId: "",
        nickName: "",
        phonenumber: "",
        password: "",
        confirmPassword: "",
        email: "",
        sex: "",
        deptId: "",
        roleIds: [],
        parentId: "",
        post: "", // 职务
      },
      pageNum: 1,
      pageSize: 10,
      roleData: [],
      personnelList: [],
    };
  },
  created() {
    if (this.roleId == Number) {
      return;
    } else {
      this.getRoleUserList();
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.tableHight = window.innerHeight - 330;
      })();
    };
  },
  activated() {
    this.tableHight = window.innerHeight - 330;
  },
  methods: {
    // 关闭更换角色
    changeClose() {
      this.roIds = [];
    },
    //更换角色
    editRole() {
      putRoleUser({
        userId: this.userId,
        roleIds: this.roIds,
      }).then((res) => {
        this.$message.success(res.msg);
        this.changeRoles = false;
        this.getRoleUserList();
      });
    },
    // 获取角色权限列表
    getRoleList() {
      getRoleLists().then((res) => {
        this.personnelList = res.rows;
      });
    },
    newStaff() {
      this.dialog.dialogStaffShowEject = true;
      this.$nextTick(function () {
        this.dialog.dialogStaffShow = true;
      });
    },
    getRoleUserList() {
      let roleDefault = "";
      if (this.isDefault !== 1) {
        roleDefault = 2;
      } else {
        roleDefault = 1;
      }
      getRoleUserList({
        roleId: this.roleId - 0,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        roleDefault: roleDefault,
      }).then((res) => {
        res.rows.map((item) => {
          if (item.dataScope == 1) {
            item.dataScope = "超级管理员数据权限";
          } else if (item.dataScope == 2) {
            item.dataScope = "全部数据权限";
          } else if (item.dataScope == 3) {
            item.dataScope = "部门数据权限";
          } else if (item.dataScope == 4) {
            item.dataScope = "部门及以下数据权限";
          } else if (item.dataScope == 5) {
            item.dataScope = "本人数据权限";
          } else if (item.dataScope == 6) {
            item.dataScope = "本人及下属数据权限";
          }
        });
        this.roleData = res.rows;
        this.total = res.total;
      });
    },
    change(row) {
      if (row.isAdmin == 1) return this.$message.info("不可更改");
      this.roIds = row.roleIds;
      this.userId = row.userId;
      this.getRoleList();
      this.changeRoles = true;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getRoleUserList();
    },
    //currentPage 改变时会触发
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getRoleUserList();
    },
  },
};
</script>

<style lang="less" scoped>
.btn {
  text-align: right;
  height: 40px;
  padding-top: 10px;
  box-sizing: border-box;
  width: 100%;
  .el-button {
    margin-right: 10px;
  }
}
.footer {
  height: 79px;
  .el-pagination {
    margin-top: 20px;
  }
  /deep/.btn-prev {
    width: 80px;
    height: 40px;
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #d3dbeb;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    background: #fafafa;
    border-radius: 4px;
    border: 1px solid #d3dbeb;
  }
  /deep/.number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #8f9bb3;
  }
  /deep/ .btn-quicknext {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #8f9bb3;
  }
  /deep/ .btn-quickprev {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #8f9bb3;
  }
  /deep/ .el-pagination__total {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2b2b2b;
    line-height: 24px;
    margin-top: 8px;
  }
  /deep/ .el-pagination__jump {
    margin-top: 6px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #2b2b2b;
    line-height: 14px;
  }
}
</style>